//配置
window.addEventListener("load", function () {
	//广告按钮
	$("#adv div").addEventListener("mouseover", function () {
		this.style.background = "#aecfff";
		this.style.fontSize = "20px";
		this.style.fontWeight = "block";
		this.style.boxShadow = "4px 4px 11px #c7c6c7";
		this.style.transition = "all 0.5s";
	});
	$("#adv div").addEventListener("mouseout", function () {
		this.style.background = "none";
		this.style.fontSize = "14px";
		this.style.fontWeight = "none";

		this.style.boxShadow = "none";
		this.style.transition = "all 0.5s";
	});

	//回到顶部
	window.addEventListener("scroll", function () {
		if (window.scrollY >= 200) {
			$("#back").style.transition = "opacity 1s";
			$("#back").style.opacity = 1;
		} else {
			$("#back").style.opacity = 0;
		}
	});
	$("#back").addEventListener("click", function () {
		window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
	});

	//功能二:API次数tap动态渲染
	//1.获取后台数据,对数据进行遍历
	const apiData = [
		{ times: 4000, price: 1200, unitprice: "0.3000" },
		{ times: 8000, price: 2000, unitprice: "0.2500" },
		{ times: 40000, price: 8000, unitprice: "0.2000" },
	];
	apiData.forEach(function (v) {
		$(
			"#numTap"
		).innerHTML += `<span data-price=${v.price}  data-unitprice=${v.unitprice}>${v.times}次</span>`;
	});
	//给默认的第一个span添加激活样式
	$("#numTap span")[1].classList.add("active");
	//给价格添加默认第一个属性样式
	$("#rtprice").innerHTML = `<span class="fc-red fz-16">￥${
		$("#numTap span")[1].dataset.price
	}</span>
				<span class="fc-gap fz-12"
					>(约${$("#numTap span")[1].dataset.unitprice}元/次)，仅限企业实名购买;</span
				>`;
	//功能一:点击tap区域增加激活样式
	//1.获取相关节点
	$("#numTap span").forEach(function (v) {
		v.addEventListener("click", function () {
			//给span绑击点击事件
			if (this.id !== "qrcold") {
				//判断是否包含qrcold
				$("#numTap span").forEach(function (item) {
					//排他取消样式
					item.classList.remove("active");
				});
				//给自己添加激活样式
				this.classList.add("active");
				//动态渲染根据上面价格框来添加下面的价格
				console.log(this.dataset);
				$(
					"#rtprice"
				).innerHTML = `<span class="fc-red fz-16">￥${this.dataset.price}</span>
				<span class="fc-gap fz-12"
					>(约${this.dataset.unitprice}元/次)，仅限企业实名购买;</span
				>`;
			}
		});
	});
	// 遍历排他
	tabChange(".bottomtele-top li", "active", ".contLf div", "on");
	//功能三

	var config = {
		selector: "#bannerBg",
		vx: 4, //小球x轴速度,正为右，负为左
		vy: 4, //小球y轴速度
		height: 2, //小球高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 110, //点个数
		color: "#000", //点颜色
		stroke: "130,255,255", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};

	//调用
	CanvasParticle(config);
});
